<template>
  <div>
    <div class="al-box-container">

      <CitySelectorComponent
              v-if="enableCity == true"
              default-active-city="广州"
              @getSonData="getCityName"
              :city-data="cityData"/>

<!--      <el-divider v-if="enableCity == true"></el-divider>-->

      <!--打卡点推荐-->
      <div v-if="mode == 'list-h'" class="">
        <div class="al-flex-wrap al-flex-justify-space-around">
          <div v-if="pageInfo.list.length == 0" class="al-box-container">
            <!--空数据提示-->
            <EmptyTip/>
          </div>
          <div v-else
               v-for="(item, index) in pageInfo.list[this.pageInfo.pageNum]"
               class="al-box-container al-width-33"
               @click="goDetailPage(item)"
               :key="index">
            <div class="al-m-top-10px " >
              <ALImage
                      :src="item.img_list[0]"
                      class="al-hover-img al-overflow-hide"/>
              <div class="al-box-container">
                <span>{{item.title}}</span>
              </div>
            </div>
          </div>

          <el-divider v-if="enablePagination == true"></el-divider>

          <!--分页-->
          <div v-if="enablePagination == true" class="al-box-container">
            <div>
              <el-pagination
                      v-if="pageInfo.list.length != 0"
                      background
                      :page-size="pageInfo.pageSize"
                      @next-click="nextPage"
                      @prev-click="prevPage"
                      @current-change="handleChangePageNum"
                      layout="prev, pager, next"
                      :total="pageInfo.total">
              </el-pagination>
            </div>
          </div>

        </div>

      </div>

      <div v-else-if="mode == 'list-v'">
        <div class="">
          <div v-if="pageInfo.list.length == 0"
               class="al-box-container">
            <!--空数据提示-->
            <EmptyTip/>
          </div>
          <div v-else
               v-for="(item, index) in pageInfo.list[this.pageInfo.pageNum]"
               class="al-box-container"
               @click="goDetailPage(item)"
               :key="index">
            <div class="al-m-top-10px al-hover-shadow-radius al-overflow-hide al-box-shadow-radius al-cursor-pointer" >
              <ALImage
                      :src="item.img_list[0]"
                      class=""/>
              <div class="al-box-container">
                <span>{{item.title}}</span>
              </div>
            </div>
          </div>

          <el-divider v-if="enablePagination == true"></el-divider>

          <!--分页-->
          <div v-if="enablePagination == true" class="al-box-container">
            <div>
              <el-pagination
                      v-if="pageInfo.list.length != 0"
                      background
                      :page-size="pageInfo.pageSize"
                      @next-click="nextPage"
                      @prev-click="prevPage"
                      @current-change="handleChangePageNum"
                      layout="prev, pager, next"
                      :total="pageInfo.total">
              </el-pagination>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {request} from "../../../util/network/request";
  import ALImage from "../../../components/public/ALImage";
  import EmptyTip from "../../../components/public/EmptyTip";
  import CitySelectorComponent from "../../appointment/component/CitySelectorComponent";
  import {REDIS_SPOT_GET_BY_CITY} from "../../../util/network/api/common/api-common";

  export default {
    name: "SpotComponent",
    components: {CitySelectorComponent, EmptyTip, ALImage},
    //属性
    props: {
      enableCity: {
        type: Boolean,
        default: false
      },
      enablePagination: {
        type: Boolean,
        default: false
      },
      itemCount: Number,

      mode: {
        type: String,
        default: 'list-v'
      }
    },

    //数据
    data() {
      return {
        spot: {},
        radio: '广州',
        pageInfo: {
          total: 0,
          pageSize: 5,
          pageNum: 0,
          list: []
        },

        cityData: [
          {
            id: 1,
            name: "北京"
          },
          {
            id: 2,
            name: "上海"
          },
          {
            id: 3,
            name: "广州"
          },
          {
            id: 4,
            name: "深圳"
          }
        ],

      }
    },

    //挂载完成时
    mounted() {
      this.getSpot();
    },

    //方法
    methods: {
      goPage(path){
        this.gotoPage(path);
      },

      getSpot(city = "mdyp-guangzhou") {
        this.pageInfo.list = [];
        request({
          url: REDIS_SPOT_GET_BY_CITY + city
        }).then(res => {
          // console.log(res);
          this.spot = res.data;

          this.pageUtils(this.spot, this.itemCount);
        }).catch(err => {
          console.log(err)
        });
      },

      //将数据分页
      pageUtils(dataArray, pageSize = 6) {
        this.pageInfo.total = dataArray.length;
        this.pageInfo.pageSize = pageSize;

        //将一个大数组拆分成多个小数组
        for (let i = 0; i < dataArray.length; i += pageSize) {
          this.pageInfo.list.push(dataArray.slice(i, i + pageSize));
        }

        // console.log("拆分数组");
        // console.log(this.pageInfo);

      },

      nextPage() {
        this.pageInfo.pageNum += 1;
      },

      prevPage() {
        this.pageInfo.pageNum -= 1;
      },

      getCityName(city) {
        console.log(city);
        // if (city === "全部") {
        //   city = " ";
        // }

        switch (city) {
          case "广州":
            this.getSpot("mdyp-guangzhou");
            break;
          case "深圳":
            this.getSpot("mdyp-shenzhen");
            break;
          case "北京":
            this.getSpot("mdyp-beijing");
            break;
          case "上海":
            this.getSpot("mdyp-shanghai");
            break;
          case "珠海":
            this.getSpot("mdyp-zhuhai");
            break;

          default:
            console.log("没有获取到数据");
            break;
        }
      },


      handleChangePageNum(pageNum) {
        console.log(pageNum);
        this.pageInfo.pageNum = pageNum - 1;
      },

      goDetailPage(item){
        this.$store.commit("setStoreSpotData", item);
        this.goPage('/spot/detail/')
      }
    },

    //计算属性
    computed: {},

    //监听
    watch: {}
  }
</script>

<style scoped>

</style>
